<!-- 
  Pinia的仓库是懒执行的操作：

    定义好的仓库，只有在第一次被使用到的时候，才会被Pinia会管理

 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="app.count++">{{ app.count }}</button>
    <button @click="city.raw.push(100)">新增</button>
    <hr />
    <ul>
      <li v-for="item in city.raw" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { useAppStore } from "./stores/app";
import { useCityStore } from "./stores/city";

const app = useAppStore();
const city = useCityStore();
console.log("app", app);
console.log("city", city.a);
</script>
